<ng-container *ngIf="showMenu; else breadcrumbContentTpl">
  <span
    class="devui-breadcrumb-item-with-menu devui-dropdown-no-border devui-dropdown-origin devui-breadcrumb-dropdown-origin"
    dDropDown
    dDropDownToggle
    appendToBody
    trigger="hover"
    (toggleEvent)="onToggle($event)"
    [ngClass]="{ 'devui-breadcrumb-item-active': isOpen }"
  >
    <ng-template [ngTemplateOutlet]="breadcrumbContentTpl"></ng-template>
    <i class="devui-breadcrumb-down-icon">
      <svg
        width="1em"
        height="1em"
        viewBox="0 0 16 16"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <path
            d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z"
            fill-rule="nonzero"
          ></path>
        </g>
      </svg>
    </i>
    <div dDropDownMenu class="devui-dropdown-menu">
      <ng-template
        [ngTemplateOutlet]="customMenuTemplate ? customMenuTemplate : dropDownMenuTpl"
        [ngTemplateOutletContext]="{
          $implicit: this
        }"
      >
      </ng-template>
    </div>
  </span>
</ng-container>

<ng-template #breadcrumbContentTpl>
  <span class="devui-breadcrumb-item">
    <ng-content></ng-content>
  </span>
</ng-template>

<ng-template #dropDownMenuTpl>
  <div *ngIf="isSearch" class="devui-search-container">
    <d-search [size]="'sm'" (searchFn)="searchEvent($event)" [cssClass]="'devui-search-in-dropdown'"></d-search>
  </div>
  <ul class="devui-breadcrumb-dropdown-menu">
    <li *ngFor="let item of menuListDisplay" title="{{ item.name }}">
      <a
        *ngIf="!item.linkType || item.linkType === 'hrefLink'"
        [href]="item.link"
        rel="noopener"
        [target]="item.target ? item.target : '_self'"
        >{{ item.name }}</a
      >
      <a
        *ngIf="item.linkType === 'routerLink'"
        rel="noopener"
        [target]="item.target"
        [href]="item.link"
        (click)="navigateTo($event, item)"
        >{{ item.name }}</a
      >
    </li>
  </ul>
</ng-template>

<span class="devui-breadcrumb-separator">
  <ng-template
    [ngTemplateOutlet]="breadCrumbComponent.separatorIcon ? breadCrumbComponent.separatorIcon : defaultSeparator"
    [ngTemplateOutletContext]="{
      $implicit: this
    }"
  >
  </ng-template>
</span>

<ng-template #defaultSeparator>
  <span class="devui-breadcrumb-separator">/</span>
</ng-template>
